<template>
  <div>
    <div class="main" v-if="click">
      <el-form :inline="true" :model="form">
        <el-form-item label="签署日期">
          <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="到">
          <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="乙方">
          <el-input v-model="form.name" placeholder="输入乙方"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="选择状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="过期" value="过期"></el-option>
            <el-option label="解约" value="解约"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryContracts">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="contracts" style="width: 100%">
        <el-table-column prop="id" label="合同编号"></el-table-column>
        <el-table-column prop="name" label="乙方"></el-table-column>
        <el-table-column prop="startDate" label="开始日期"></el-table-column>
        <el-table-column prop="endDate" label="结束日期"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="roomNumber" label="套房"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="viewDetails(scope.row)" type="primary" size="small">详情</el-button>
              <el-button @click="renewContract(scope.row)" type="success" size="small">续签</el-button>
              <el-button @click="terminateContract(scope.row)" type="warning" size="small" :disabled="scope.row.status !== '正常'">解约</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="contracts.length > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <el-dialog title="解约理由" :visible.sync="dialogVisible" width="30%">
        <el-input type="textarea" v-model="reason" placeholder="请输入解约理由"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmTerminate">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="info" v-else>
      <el-header style="color:black">
        <el-page-header @back="goBack" content="合同详情" class="page-header"></el-page-header>
      </el-header>
      <el-card>
        <h3>租赁合同</h3>
        <p>
          出租方（甲方）：
          <u>{{ contract.lessorName }}</u>
        </p>
        <p>
          承租方（乙方）：
          <u>{{ contract.name }}</u>
        </p>
        <p>
          身份证号：
          <u>{{ contract.idNumber }}</u>
        </p>
        <p>
          性别：
          <u>{{ contract.gender }}</u>
        </p>
        <p>
          套房信息：
          <u>{{ contract.areaName }}{{ contract.communityName }}{{ contract.roomNumber }}</u>
        </p>
        <p>
          租金：
          <u>{{ contract.rent }}</u> 元/月
        </p>
        <p>
          合同期限：
          <u>{{ contract.leaseTerm }} 年</u>
        </p>
        <p>
          起始时间：
          <u>{{ contract.startDate }}</u>
        </p>
        <p>
          甲方联系方式：
          <u>{{ contract.lessorPhone }}</u>
        </p>
        <p>
          乙方联系方式：
          <u>{{ contract.phone }}</u>
        </p>
        <p>甲乙双方经协商一致，达成如下协议：</p>
        <ol>
          <li>
            租赁期限为{{ contract.leaseTerm }}年，自
            <u>{{ contract.startDate }}</u>起至
            <u>{{ contract.endDate }}</u>止。
          </li>
          <li>
            租金为每月
            <u>{{ contract.rent }}</u>元，乙方应于每月5日前支付当月租金。
          </li>
          <li>乙方不得擅自转租、转借房屋。</li>
          <li>租赁期间，乙方应保持房屋及其附属设施的完好，因乙方使用不当造成的损坏由乙方负责维修。</li>
          <li>合同期满后，如甲乙双方无异议，可续签合同。</li>
        </ol>
        <span>
          甲方签字（章）：
          <img
            :src="require(`@/assets/seal.png`)"
            style="width:150px;height:150px"
            alt="甲方签字"
          />
        </span>
        <span style="margin-left: 100px">
          乙方签字：
          <img :src="contract.autograph" alt="签名" style="width:300px;height:150px" />
        </span>
      </el-card>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      form: {
        startDate: "",
        endDate: "",
        name: "",
        status: ""
      },
      contracts: [],
      currentPage: 1,
      pageSize: 5,
      total: "",
      click: true,
      contract: {},
      dialogVisible: false,
      selectContract: {},
      reason: ""
    };
  },
  mounted() {
    this.queryContracts();
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.handleQuery();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.handleQuery();
    },
    queryContracts() {
      let curr =
        this.form.name == "" ? (this.currentPage - 1) * this.pageSize : 0;
      this.$axios
        .post("/contract/getAllContract", {
          startDate: this.form.startDate,
          endDate: this.form.endDate,
          name: this.form.name,
          status: this.form.status,
          curr,
          size: this.pageSize
        })
        .then(res => {
          this.contracts = [];
          res.data.data.forEach(item => {
            this.contracts.push({
              ...item,
              startDate: item.startDate.substring(0, 10),
              endDate: item.endDate.substring(0, 10)
            });
          });
          this.total = res.data.total;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    goBack() {
      this.click = true;
    },
    viewDetails(row) {
      this.click = false;
      this.contract = { ...row };
    },
    renewContract(row) {
      console.log("续签合同", row);
      this.$message.info("功能尚未实现");
    },
    terminateContract(row) {
      this.selectContract = row;
      this.dialogVisible = true;
    },
    confirmTerminate() {
      this.$axios
        .get("/contract/termination", {
          id: this.selectContract.id,
          name: this.selectContract.name,
          msg: this.reason
        })
        .then(res => {
          this.$message.success(res.data.msssage);
          this.dialogVisible = false;
          this.queryContracts();
        });
    }
  }
};
</script>
  
  <style scoped>
.el-card {
  padding: 20px;
}
</style>
  